<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html 练习</title>
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    <!-- meta 标签一般防止在<head>-->
    <link rel="stylesheet" type="text/css" href="styles.css">
    <meta name="author" content="lch">
    <meta http-equiv="refresh" content="30"> //每30s刷新当前页面
</head>

<body>
    <b>加粗文本</b><br>
    <i>斜体文本</i><br>
    <code>电脑自动输入</code><br>
    这是<sub>下标</sub>和 <sup>上标</sup><br>
    <em>定义着重文字</em><br>
    <small>小号文字</small><br>
    <strong>加重语气</strong><br>
    <ins>插入字</ins><br>
    <del>删除字</del><br>
    <a href="https://www.runoob.com/">访问菜鸟教程</a>
    <br>
    <a href=https://www.runoob.com/">
        <img src="https://ts2.cn.mm.bing.net/th?id=OIP-C.6KnxsdjDHm3KSSvRcp1M0gHaHW&w=250&h=249&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
            alt="示例图片">
    </a><br>
    <a id="tips">有用的提示部分</a>
    <!--这是用CSS来修改-->
    <!-- background-color 是定义一个元素的背景-->
    <h2 style="background-color:red;">这是一个标题</h2>
    <p style="background-color:green;">这是一个段落。</p>
    <!--font-family（字体）,color（颜色） font-size(字体大小)-->
    <h1 style="font-family:verdana ;">一个标签</h1>
    <P style="font-family: arial;color:red;font-size:20px;">一个段落</P>
    <h1 style="text-align:center;">居中对齐的标题</h1>
    <p>这是一个标签</p>
    <!-- 
        <head>
            <style type="text/css">
            body {background-color:rgb(30, 255, 0);}
            p {color:blue;}
            </style>
            </head> -->


    <!--
                tr：tr 是 table row 的缩写，表示表格的一行。
                td：td 是 table data 的缩写，表示表格的数据单元格。
                th：th 是 table header的缩写，表示表格的表头单元格。
            -->
    <!--
                HTML 表格由 <table> 标签来定义。
            -->

    <table>
        <thead>
            <tr>
                <th>列标题1</th>
                <th>列标题2</th>
                <th>列标题3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>行1，列1</td>
                <td>行1，列2</td>
                <td>行1，列3</td>
            </tr>
            <tr>
                <td>行2，列1</td>
                <td>行2，列2</td>
                <td>行2，列3</td>
            </tr>
        </tbody>
    </table>


    <!--
        用于指定边框的大小,现在不适合用了，因为不符合HTML和CSS的分离的原则
    -->

    <h4>一列:</h4>
    <table border="1">
        <tr>
            <td>100</td>
        </tr>
    </table>

    <h4>一行三列:</h4>
    <table border="1">
        <tr>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
    </table>

    <h4>两行三列:</h4>
    <table border="1">
        <tr>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr>
            <td>400</td>
            <td>500</td>
            <td>600</td>
        </tr>
    </table>

</body>

</html>